// 1. 导入axios dayjs
// 2. 导入css
// 3. 导入less
// 4. 导入图片
// 5. 编写逻辑
import dayjs from 'dayjs'
import axios from 'axios'
// 导入样式
// import './assets/css/base.css'
// 导入less
import './assets/less/index.less'

// 导入图片
import dog from './assets/imgs/dog.png'
import shake from './assets/imgs/shake.gif'

// 获取dom元素
const box = document.querySelector('.box')

setInterval(() => {
  box.innerHTML = dayjs().format('YYYY年MM🈷️DD日 HH:mm:ss')
}, 1000)
// 默认设置一次
box.innerHTML = dayjs().format('YYYY-MM🈷️DD HH:mm:ss')

// 创建并添加图片到页面上
for (let i = 0; i < 200; i++) {
  // 创建 图片 设置 src属性 并添加到页面上
  const img1 = document.createElement('img')
  img1.src = shake
  document.body.appendChild(img1)
  const img2 = document.createElement('img')
  img2.src = dog
  document.body.appendChild(img2)
}

// ------------- 和机器人聊天 -------------
// 获取ul标签 方便添加
const list = document.querySelector('ul')
document.querySelector('input').addEventListener('keyup', async function (e) {
  // 获取输入的内容
  const value = this.value.trim()

  if (e.key === 'Enter' && value) {
    // 创建自己的聊天区域 并设置内容
    const myLi = document.createElement('li')
    myLi.innerHTML = value
    // 添加到页面上
    list.appendChild(myLi)
    // 清空输入框的值 已经获取了value 现在清空的是输入框的内容 变量value的值不会被清除
    this.value = ''

    const res = await axios({
      url: 'http://ajax-api.itheima.net/api/robot',
      params: {
        spoken: value
      }
    })
    // 创建机器人的聊天区域并设置内容
    const roLi = document.createElement('li')
    roLi.innerHTML = res.data.data.info.text
    // 添加到页面上
    list.appendChild(roLi)
  }
})
